import React, { useEffect, useState } from 'react';
import * as XLSX from 'xlsx'; // 导入xlsx库
import {
    Table,
    Modal,
    message,
    Button,
    Form,
    Input,
    Select,
} from "antd";
import type { TableProps } from 'antd';
import './GBRechargList.css';
import axios from 'axios';

// 定义列表数据类型
interface DataType {
    id: number,
    name: string;
    word: string;
    tel: string;
    natural: string;
    state: string;
    type: string;
    date: string;
    price: string;
}

const GBRecharge: React.FC = () => {
    const columns: TableProps<DataType>['columns'] = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id',
            align: 'center',
        },
        {
            title: '用户名',
            dataIndex: 'name',
            key: 'name',
            align: 'center',
        },
        {
            title: '店铺名称',
            dataIndex: 'word',
            key: 'word',
            align: 'center',
        },
        {
            title: '手机号码',
            dataIndex: 'tel',
            key: 'tel',
            align: 'center',
        },
        {
            title: '业务单据',
            dataIndex: 'natural',
            key: 'natural',
            align: 'center',
        },
        {
            title: '业务类型',
            dataIndex: 'state',
            key: 'state',
            align: 'center',
        },
        {
            title: '流水类型',
            dataIndex: 'type',
            key: 'type',
            align: 'center',
        },
        {
            title: '时间',
            dataIndex: 'date',
            key: 'date',
            align: 'center',
        },
        {
            title: '果币(元)',
            dataIndex: 'price',
            key: 'price',
            align: 'center',
        },
    ];


    const [orderList, setOrderList] = useState<DataType[]>([]);// 列表数据
    const [searchQuery, setSearchQuery] = useState<string>(''); // 新增的搜索状态

    // 请求数据的方法
    const FeachList = async () => {
        try {
            const response = await axios.get("/api/orderlist");
            const { code, orderList } = response.data;
            if (code === 200) {
                setOrderList(orderList);
            }
        } catch (error) {
            console.error("Error fetching order list:", error);
        }
    };

    useEffect(() => {
        FeachList();
    }, []);

    // 导出Excel表格
    // 定义导出Excel表格的函数
    const exportExcel = () => {
        const ws = XLSX.utils.json_to_sheet(orderList); // 将数据转换为工作表
        const wb = XLSX.utils.book_new(); // 创建一个新的工作簿
        XLSX.utils.book_append_sheet(wb, ws, "果币数据"); // 将工作表添加到工作簿中
        XLSX.writeFile(wb, "果币数据.xlsx"); // 将工作簿保存为Excel文件
    }


    const [form] = Form.useForm();// 定义表单实例

    const [isModalOpen, setIsModalOpen] = useState(false);// 控制弹框是否打开的状态

    const [ModalState, setModalState] = useState(true);// 控制弹框是添加还是别的窗口

    //当点击添加按钮的时候调用函数
    const showAddModal = () => {
        // 添加窗口默认表单值为空
        form.resetFields();
        // 设置模态框类型为true 
        setModalState(true);
        // 打开弹框
        setIsModalOpen(true);
    };

    // 弹框中“确定”按钮的处理函数
    const handleOk = () => {
        // 如果模态框类型为true，则执行以下操作
        if (ModalState) {
            // 获取表单数据，并附加一个新生成的ID
            const AddData: DataType = {
                ...form.getFieldsValue(),
                id: new Date().getTime(), // 使用当前时间戳作为新记录的ID
            };
            // 向后端发送数据
            axios.post("/api/addlist", AddData).then((resp) => {
                const { code, msg } = resp.data;
                // 根据返回状态码判断是否成功
                if (code === 200) {
                    // 成功提示信息
                    message.success(msg);
                    // 刷新列表数据
                    FeachList();
                } else {
                    // 失败提示信息
                    message.error(msg);
                }
            });
        }
        // 关闭弹框
        setIsModalOpen(false);
    }

    // 弹框中“取消”按钮的处理函数
    const handleCancel = () => {
        // 关闭模态框
        setIsModalOpen(false);
    }

    // 过滤列表数据，搜索匹配项
    // 在数组 orderList 中查找那些字段值包含指定搜索字符串 searchQuery 的元素
    const filteredOrderList = orderList.filter(item =>
        // 遍历对象的值，检查是否包含搜索查询
        Object.values(item).some(value =>
            value.toString().toLowerCase().includes(searchQuery.toLowerCase())
        )
    );

    return (
        <div className='GBRechargeList'>
            {/* 搜索操作 */}
            <div className="GBRechargeSearch">
                <p>
                    搜索:
                    <Input
                        placeholder='请输入搜索内容'
                        style={{ width: '200px', marginLeft: '10px' }}
                        value={searchQuery} // 绑定搜索框的值
                        onChange={e => setSearchQuery(e.target.value)} // 更新搜索状态
                    />
                </p>
                <Button onClick={showAddModal} style={{ width: '150px', marginLeft: '30px', backgroundColor: '#1a66ff', color: '#fff' }}>充值</Button>
                <Button onClick={exportExcel} style={{ width: '150px', marginLeft: '30px', backgroundColor: '#1a66ff', color: '#fff' }}>导出</Button>
            </div>
            <Table<DataType>
                columns={columns}
                dataSource={filteredOrderList} // 使用过滤后的数据
                rowKey="id" // 确保每一行都有唯一的 key
            />
            {/* 添加的弹框 */}
            <Modal
                title="添加"
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
                width={550}
            >
                <Form form={form} name="control-hooks" labelCol={{ span: 4 }} >
                    <Form.Item name="id" label="&nbsp;&nbsp;&nbsp;&nbsp;ID" >
                        <Input disabled />
                    </Form.Item>
                    <Form.Item name="name" label="用户名">
                        <Input />
                    </Form.Item>
                    <Form.Item name="tel" label="电话">
                        <Input />
                    </Form.Item>
                    <Form.Item name="word" label="店铺名称">
                        <Select allowClear>
                            {["老果记自营店", "果牛群", "乐开花", "杭辉果业", "鸣笛"].map(
                                (item, ind) => (
                                    <Select.Option key={ind} value={item}>
                                        {item}
                                    </Select.Option>
                                )
                            )}
                        </Select>
                    </Form.Item>
                    <Form.Item name="natural" label="业务单据">
                        <Input />
                    </Form.Item>
                    <Form.Item name="state" label="业务类型">
                        <Select allowClear>
                            {["充值", "订单消费", "退款"].map(
                                (item, ind) => (
                                    <Select.Option key={ind} value={item}>
                                        {item}
                                    </Select.Option>
                                )
                            )}
                        </Select>
                    </Form.Item>
                    <Form.Item name="type" label="流水类型">
                        <Select allowClear>
                            {["收入", "支出"].map(
                                (item, ind) => (
                                    <Select.Option key={ind} value={item}>
                                        {item}
                                    </Select.Option>
                                )
                            )}
                        </Select>
                    </Form.Item>
                    <Form.Item name="date" label="时间">
                        <Input />
                    </Form.Item>
                    <Form.Item name="price" label="果币(元)">
                        <Input />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}

export default GBRecharge;